<template>
	<view class="container">
		<view class="top flex items-center" :style="[{ 'padding-top': topH + 'px', 'padding-right': searchr + 'px' }]">
			<up-icon name="arrow-left" color="#000" size="23" @click="goBack"></up-icon>
			<view class="search flex items-center justify-between flex-1">
				<image src="/static/product/ic_searchgray.png" class="s-icon"></image>
				<input type="text" placeholder="搜索商品" class="inp flex-1" placeholder-class="inp-place" v-model="searchPage.keyword" />
				<view class="search-icon" @click="search()">搜索</view>
			</view>
		</view>

		<view class="fill">
			<view class="big-title flex items-center justify-between">
				<view class="title">搜索历史</view>
				<view class="more">
					<up-icon name="trash" size="20" class="icon" @click="clearHistory" />
				</view>
			</view>

			<view class="history flex items-center">
				<view class="item" v-for="(item, index) in searchHistory" :key="index" @click="historySearch(item.keyword)">{{ item.keyword }}</view>
			</view>

			<view class="big-title flex items-center justify-between mt-58">
				<view class="title">热门搜索</view>
				<view class="more flex items-center justify-center" @click="getHotSearch">
					<up-icon name="reload" size="18" class="icon" />
					<text>换一换</text>
				</view>
			</view>

			<view class="guess">
				<up-row gutter="20" style="flex-wrap: wrap">
					<up-col
						style="margin-bottom: 30rpx"
						span="6"
						class="item line-1-clamp"
						v-for="(item, index) in hotSearch"
						:key="index"
						@click="goUrl('/pages/product/product-list?keyword=' + item)"
					>
						{{ item }}
					</up-col>
				</up-row>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject } from 'vue';

	import { port, imgUrl, goUrl, hint, goBack } from '/service/port';
	import { onReachBottom, onPullDownRefresh, onLoad, onShow } from '@dcloudio/uni-app';

	const topH = ref(15);
	const searchr = ref(15);
	onShow(() => {
		// #ifdef MP-WEIXIN
		const menuInfo = inject('menuButtonInfo');
		topH.value = menuInfo.top;
		searchr.value = menuInfo.width + 25;
		// #endif

		getHistory();
		getHotSearch();
	});

	const keyword = ref('');

	//搜索历史
	const searchHistory = ref({});
	const searchShow = ref(false);
	const searchPage = ref({
		keyword: '',
		page: 1,
		limit: 10
	});

	const hotSearch = ref([]);

	async function getHotSearch() {
		let res = await port('getHotSearch');
		hotSearch.value = res.data;
	}

	const getHistory = () => {
		searchHistory.value = uni.getStorageSync('searchHistory') ? uni.getStorageSync('searchHistory') : [];
	};

	const search = () => {
		if (!searchPage.value.keyword) return (searchShow.value = false);
		let searchHistory = uni.getStorageSync('searchHistory') ? uni.getStorageSync('searchHistory') : [];
		let index = searchHistory.findIndex((v) => v.keyword == searchPage.value.keyword);
		if (index != -1) {
			searchHistory.splice(index, index + 1);
		}

		let item = {
			keyword: searchPage.value.keyword
		};
		if (searchHistory.length >= 15) {
			searchHistory.splice(0, 1);
		}
		searchHistory.push(item);
		uni.setStorageSync('searchHistory', searchHistory);
		searchHistory.value = searchHistory;
		getHistory();
		searchShow.value = true;
		uni.navigateTo({
			url: '/pages/product/product-list?keyword=' + searchPage.value.keyword
		});
	};

	function historySearch(keyword) {
		uni.navigateTo({
			url: '/pages/product/product-list?keyword=' + keyword
		});
	}

	const clearHistory = () => {
		uni.showModal({
			title: '请确认',
			content: '确定要要清空吗？',
			confirmColor: '#FB3204',
			success: async function (res) {
				if (res.confirm) {
					uni.removeStorageSync('searchHistory');
					getHistory();
				}
			}
		});
	};
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #ffffff !important;
	}
	.top-bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 739rpx;
		z-index: 2;
	}
	.mt-58 {
		margin-top: 58rpx;
	}
	.big-title {
		.title {
			font-weight: 500;
			font-size: 32rpx;
			
		}
		.more {
			font-weight: 400;
			font-size: 26rpx;
			color: #888888;
			> text {
				margin-left: 10rpx;
			}
		}
	}
	.container {
		position: relative;
		z-index: 9;
		.top {
			padding: 30rpx;
			.left-icon {
				margin-right: 19rpx;
			}
			.search {
				background: #f0f0f0;
				border-radius: 36rpx;
				padding: 6rpx;
				margin-left: 19rpx;
				.s-icon{
					width: 34rpx;
					height: 34rpx;
					margin-left: 12rpx;
				}
				.inp {
					font-weight: 400;
					font-size: 26rpx;
					margin-left: 15rpx;
				}
				.inp-place {
					color: #bdbdbd;
				}
				.search-icon {
					width: 120rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: $theme-bg-btn-color;
					border-radius: 30rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #ffffff;
					text-align: center;
				}
			}
		}

		.fill {
		
			padding: 30rpx;

			.history {
				flex-wrap: wrap;
				box-sizing: border-box;
				gap: 12rpx;
				margin-top: 25rpx;
				.item {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					background: #f4f5f8;
					border-radius: 18rpx;
					padding: 11rpx 22rpx 13rpx 22rpx;
				}
			}

			.guess {
				margin-top: 37rpx;

				.item {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
				}
			}
		}
	}
</style>
